<template>
  <div>
    <el-dialog title="申请用车" :visible="dialogVisible" width="80%" @close="close">
      <div>
        <el-form ref="form" :rules="rules" :model="formData" label-width="80px">
          <el-row>
            <el-col :sm="24">
              <el-form-item prop="pcount" label="用车人数">
                <el-input v-model="formData.pcount" type="number" min="1"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="24">
              <el-form-item prop="reason" label="用车理由">
                <el-input v-model="formData.reason" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="24">
              <el-form-item prop="wf" label="是否往返">
                <el-select v-model="formData.wf" placeholder="是否往返">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="12">
              <el-form-item prop="starttime" label="开始时间">
                <el-date-picker v-model="formData.starttime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item prop="endtime" label="结束时间">
                <el-date-picker v-model="formData.endtime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="12">
              <el-form-item prop="origin" label="始发地">
                <el-input v-model="formData.origin"></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item prop="destination" label="目的地">
                <el-input v-model="formData.destination"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="24">
              <el-form-item label="备注">
                <el-input v-model="formData.mark" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="apply">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 * @description 申请用车对话框
 */
import { apply } from "@/api/usecar";
import {dateFormat} from '@/utils/utils'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        pcount: 1,
        reason: "",
        wf: 1,
        starttime: "",
        endtime: "",
        origin: "",
        destination: "",
        mark: ""
      },
      rules: {
        pcount: [{ required: true, message: "请输入", trigger: "blur" }],
        reason: [{ required: true, message: "请输入", trigger: "blur" }],
        wf: [{ required: true, message: "请输入", trigger: "blur" }],
        starttime: [{ required: true, message: "请选择", trigger: "blur" }],
        endtime: [{ required: true, message: "请选择", trigger: "blur" }],
        origin: [{ required: true, message: "请输入", trigger: "blur" }],
        destination: [{ required: true, message: "请输入", trigger: "blur" }]
      }
    };
  },
  methods: {
    apply() {
        this.$refs['form'].validate(async (valid) => {
            if (valid) {
                let params=JSON.parse(JSON.stringify(this.formData))
                params.starttime=dateFormat(params.starttime)
                params.endtime=dateFormat(params.endtime)
                try {
                    let data = await apply(params);
                    this.$refs['form'].resetFields()
                    this.$emit("finish",data)
                } catch (error) {
                    this.$emit("finish",error)
                }
            }
        })
    },
    close(){
        this.$emit("update:dialogVisible",false)
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>